<script setup>
import {provide} from 'vue'

const props = defineProps({
    modelValue:{
        type:Number,
        default:0,
    }
})
// console.log(props)  //Proxy 实例对象 里面存了modelValue

// 通过defineEmits宏定义事件
const emits = defineEmits(['update:modelValue'])
const setActive = (index) =>{
    emits('update:modelValue',index)
}

provide('TabBar',{
    props,
    setActive,
    children:[],
    addChild:function(value){
        this.children.push(value)   // 这里的 this 指向 tabBar 
    }
})
</script>

<template>
  <div class="tab-bar" >
    <slot></slot>
  </div>
</template>

<style scoped>
.tab-bar {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: space-around;
  align-items: center;
  padding: 5px 0;
  background: skyblue;
}
</style>
